<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间</title>
    <style>
        div {
            margin-top: 100px;
            text-align: center;
            color:blueviolet;
        }
        span{
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <p></p>
    </div>
    <script>
        let spn = document.getElementsByTagName('p')[0]
        setInterval(() => {
            let date = new Date()
            let year = date.getFullYear()
            let month = date.getMonth() + 1
            let day = date.getDate()
            let hour = date.getHours()
            let min = date.getMinutes()
            let s = date.getSeconds()
            spn.innerHTML = `${year}<span>年</span>${month}<span>月</span>${day}<span>日</span>${hour}<span>时</span>${min}<span>分</span>${s}<span>秒</span>`
        }, 1000)
    </script>
</body>

</html>